<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>预约美发</title>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
<script src="assets/plugins/raty/jquery.raty.js"></script>
<script type="text/javascript">
//预约时间
var advanceNum = ${advanceNum};
var ctx = "${ctx}";
var wxConfigSuccess = true;
wx.config({
    debug: false,
    appId: '${appid}',
    timestamp: ${sign.timestamp},
    nonceStr: '${sign.noncestr}',
    signature: '${sign.signature}',
    jsApiList: [
      'previewImage'
    ]
});
wx.ready(function () {
	  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
	   wx.checkJsApi({
	      jsApiList: [
	        'previewImage'
	      ],
	      success: function (res) {
	    	 
	      },
	   });
});

wx.error(function (res) {
	  wxConfigSuccess = false;
});

function wxPreviewImage(imgObj){
	var imgList = [];
	$("#works-list").find("img").each(function(){
		imgList.push($(this).attr("src"));
	});
	wx.previewImage({
	    current: $(imgObj).attr("src"), // 当前显示图片的http链接
	    urls: imgList // 需要预览的图片http链接列表
	});
}
</script>
<script src="assets/js/wx/order.js"></script>
</head>
<body>
	<form class="am-form am-form-horizontal">
		<input type="hidden" id="employeeId" name="employeeId" /> <input
			type="hidden" id="itemName" name="itemName" />
		<h3 class="app-title">预约选项</h3>
		<div class="am-g am-padding-sm">
			<div class="am-u-sm-6">
				<h3 class="am-text-blue am-margin-bottom-xs">选择门店</h3>
				<select id="shop-sele"
					data-am-selected="{btnWidth: '100%',btnStyle: 'secondary'}">
					<c:forEach items="${shopList}" var="s">
						<option value="${s.shopId}"
							<c:if test="s.shopId eq vipShopId">selected="selected"</c:if>>
							${s.name}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<h3 class="app-title">选择美发师</h3>
		<div class=" app-emp-list">
			<ul class="am-list am-list-static am-margin-vertical-xs"
				id="employee-list">
			</ul>
		</div>
		<div class="app-emp-detail am-g am-padding-sm am-hide">
			<div class="am-u-sm-4 am-text-center">
				<img src="assets/img/avatar.png">
			</div>
			<div class="am-u-sm-8 am-u-end">
				<h3 class="am-text-blue am-margin-0">
					<span class="em-name"></span><small
						class="am-padding-left-xs am-text-black em-title"></small>
				</h3>
				<p class="am-text-xs am-text-grey am-margin-0 em-intro"></p>
				<button class="am-btn am-btn-default am-btn-sm am-radius"
					type="button">重新选择</button>
				<button class="am-btn am-btn-landiao am-btn-sm am-radius"
					type="button">查看作品</button>
			</div>
		</div>
		<h3 class="app-title">填写预约信息</h3>
		<hr class="am-margin-vertical-xs">
		<div class="am-form-group am-margin-0">
			<label for="date" class="am-u-sm-3 am-form-label">日期</label>
			<div class="am-u-sm-8 am-u-end">
				<input type="text" id="appointmentTime" name="appointmentTime" placeholder="请选择预约日期" readonly="readonly">
			</div>
		</div>
		<hr class="am-margin-vertical-xs">
		<div class="am-form-group">
			<label for="item-sele" class="am-u-sm-3 am-form-label">项目</label>
			<div class="am-u-sm-8 am-u-end">
				<select id="item-sele" name="serviceItemId"
					data-am-selected="{btnWidth: '100%',maxHeight:100}">
					<option value="">请先选择美发师</option>
				</select>
			</div>
		</div>
		<div class="am-form-group">
			<div class="am-u-sm-12 am-text-center">
				<button
					class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg"
					type="button" id="sub-btn">提交</button>
			</div>
		</div>
	</form>
	<div
		class="am-modal am-modal-landiao app-production-modal am-modal-no-btn"
		tabindex="-1" id="doc-modal" style="min-height: 20px">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">
				<span class="em-name">XX的作品</span><a href="javascript: void(0)"
					class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				<ul class="am-avg-sm-2" id="works-list">
				</ul>
			</div>
		</div>
	</div>
	<div class="am-modal am-modal-landiao app-date-modal am-modal-no-btn"
		tabindex="-1" id="date-modal">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">
				请选择时段<a href="javascript: void(0)" class="am-close am-close-spin"
					data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd am-padding-0">
				<div data-am-widget="tabs"
					class="am-tabs am-tabs-default am-margin-0" id="datetime_tabs">
					<ul class="am-tabs-nav am-cf date-ul">
						<li class="am-active"><a href="javascript: void(0)">今天</a></li>
						<li class=""><a href="javascript: void(0)">明天</a></li>
						<li class="date-select-li"><a href="javascript: void(0)">选择日期</a></li>
					</ul>
					<div class="am-g">
						<div class="am-u-sm-12 am-margin-bottom am-margin-top am-hide">
							<input type="text" id="datepicker" class="am-form-field"
								placeholder="选择日期" data-am-datepicker readonly />
						</div>
						<div class="am-u-sm-12">
							<ul
								class="am-btn-group am-btn-group-xs am-margin-top am-avg-sm-5 app-time-group"
								data-am-button>
								<c:forEach items="${orderTime}" var="s">
								<li class="am-btn am-btn-default"><input type="radio"
									name="tam" value="${s}">${s}<br><span>&nbsp;</span></li>
								</c:forEach>
							</ul>
						</div>
						<div class="am-u-sm-12 am-text-center am-margin-top-xl">
							<button
								class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg"
								type="button" id="date-btn">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
